<template>
    <swiper v-if="imageList.length > 0" class="swiper-container" :modules="modules" :loop="true" :slides-per-view="2"
            navigation mousewheel :autoplay="{ delay: 4000, disableOnInteraction: false, }"
            :pagination="{ clickable: true }">
        <swiper-slide v-for="img in imageList">
            <img :src="img" alt="广告" class="img">
        </swiper-slide>
    </swiper>
</template>

<script setup lang="ts">
import {Swiper, SwiperSlide} from 'swiper/vue';
import {Autoplay, Mousewheel, Navigation, Pagination} from 'swiper';

const modules = [Pagination, Navigation, Mousewheel, Autoplay];

const imageList = [
    "https://img.alicdn.com/imgextra/i3/O1CN01eHtvlp1mYTgvvm2CN_!!6000000004966-2-tps-1448-784.png",
    "/src/assets/images/test1.png",
    "https://img.alicdn.com/imgextra/i1/O1CN01znPgPl1UacSbZ3kCt_!!6000000002534-2-tps-1448-784.png",
    "/src/assets/images/test2.png",
    "https://img.alicdn.com/imgextra/i1/O1CN01TvMUDr1ju3VPNZUDF_!!6000000004607-2-tps-1448-784.png",
    "/src/assets/images/test3.png",
    "https://img.alicdn.com/imgextra/i2/O1CN01tMx7dB1rZScVi81NB_!!6000000005645-2-tps-1448-784.png",
    "/src/assets/images/test4.png",
    "https://img.alicdn.com/imgextra/i3/O1CN01nLmUbr1JYp8JwhVtl_!!6000000001041-2-tps-1448-784.png",
    "/src/assets/images/test5.png"
]
</script>

<style scoped>
.img {
    width: 100%;
    height: 80%;
    background: no-repeat 50% 50% / cover;
}
</style>